import Taro, { Component, Config } from '@tarojs/taro'
import { View, Text,Button,Swiper, SwiperItem, Checkbox,Label } from '@tarojs/components'
import Active from '../../componrnts/active'
import Tabbar from '../../componrnts/tabBar'
import { AtButton, AtDivider  } from 'taro-ui'
import './index.scss'
export default class Index extends Component {

  /**
   * 指定config的类型声明为: Taro.Config
   *
   * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
   * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
   * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
   */
  config: Config = {
    navigationBarTitleText: '首页'
  }
  constructor (props) {
    super(props)   // ✓ 正确
    this.state = {
      name:'张三',
      age:27,
      date: new Date(),
      counter:0,
      list:[
        {city:'北京',show:1},
        {city:'武汉',show:0},
        {city:'杭州',show:1},
        {city:'上海',show:0}
      ],
      isToggleOn: true,
      dispaly: 'block',
      check:[
        {
          value: '美国',
          text: '美国',
          checked: false
        },
        {
          value: '中国',
          text: '中国',
          checked: true
        },
        {
          value: '巴西',
          text: '巴西',
          checked: false
        }
      ],
      current:0
    }
  }
  componentWillMount () {
   
   }

  componentDidMount () {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    )
  }

  componentWillUnmount () { 
    clearInterval(this.timerID)
  }

  componentDidShow () { }

  componentDidHide () { }
  newslistclick =()  => {
    // this.setState({
    //     name:'李四',
    //     age:20
    // },() => {
    //   console.log(this.state.name)
    // })
    this.state.age = 26
    this.state.name = '李四'
  }
  tick () {
    this.setState({
      date: new Date()
    });
  }
  // clickme(name,city){
  //   console.log(name,city)
  //   this.state.name = name
  // }
  clickme = (name,city) => {
    console.log(name,city)
    this.state.name = name
  }
  checktab = () => {
    this.setState({
        isToggleOn: !this.state.isToggleOn,
        display: this.state.isToggleOn ? 'none': 'block'
      })
    //this.state.dispaly = 'none'
  }
  handleChange () {
    this.setState({
      isOpened: true
    })
  }
  onClose () {
    this.setState({
      isOpened: false
    })
  }
  render () {
    return (
      <View className='index'>
        <Text>Hello world!</Text>
        <Text className='text'>{this.state.name}</Text>
        <Text className='text'>年龄：{this.state.age}</Text>
        <Text className='text'>当前时间是：{this.state.date.toLocaleTimeString()}</Text>
        {
          this.state.list.map((item,index) =>{
            if(item.show ==1){
              return <Text key={index} className='red'>{item.city}</Text>
            }else if(item.show ==0){
              return <Text key={index} className='green'>{item.city}</Text>
            }
          })
        }
        <Swiper className='test-h' indicatorColor='#999'  indicatorActiveColor='#333'  circular  indicatorDots autoplay>
          <SwiperItem>
            <View className='demo-text-1'>1</View>
          </SwiperItem>
          <SwiperItem>
            <View className='demo-text-2'>2</View>
          </SwiperItem>
          <SwiperItem>
            <View className='demo-text-3'>3</View>
          </SwiperItem>
        </Swiper>
        <View className='page-section'>
          <Text>推荐展示样式</Text>
          {this.state.check.map((item, i) => {
            return (
              <Label className='checkbox-list__label' for={i} key={i}>
                <Checkbox className='checkbox-list__checkbox' value={item.value} checked={item.checked}>{item.text}</Checkbox>
              </Label>
            )
          })}
        </View>
        <Text style={{display: this.state.display}} className='text'>显示</Text>
        <AtDivider content='没有更多了' fontColor='#ed3f14' lineColor='#ed3f14' />
        <Button onClick={this.newslistclick} type='primary'>点击我</Button>
        <Button onClick={this.clickme.bind(this,'新县','将军县')} plain>点击传参</Button> 
        <Button onClick={this.checktab} type='warn'>切换显示和隐藏</Button>
        <AtButton type='primary' className='btn'>按钮文案</AtButton>
        <Active/>
        {/* <Tabbar onCurrent={this.state.current}/> */}
      </View>
    )
  }
}
